<!-- 菜单悬浮的原理: 通过给菜单添加position:sticky实现, 用法超简单, 仅APP端的低端机不兼容 https://caniuse.com/#feat=css-sticky -->
<template>
	<view>
		<!-- 对于mescroll-body: 需设置:sticky="true", 此应避免在mescroll-body标签前面加其他非定位的元素, 否则下拉区域会被挤出, 无法会隐藏.-->
		<!-- 对于mescroll-uni: 则无需设置:sticky="true", 无其他限制和要求 -->
		<!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
		<view class="sticky-tabs">
			<!-- <me-tabs v-model="tabIndex" nameKey='title' :tabs="tabs" @change="tabChange"></me-tabs> -->
			<view class="padding-tb-sm bg flex ">
				<view class="tui-tabs" style="width: 90%;">
					<scroll-view id="tab-bar" scroll-with-animation class="tui-scroll-h" :scroll-x="true"
						:show-scrollbar="false">
						<view style="display: flex;width: 100%;white-space: nowrap;overflow-x: auto;">
							<view :key='index' v-for="(item, index) in tabs"
								style="width:30%;margin-left: 16upx;text-align: center" :id="item.id"
								:data-current="index" @tap="tabChange(item)">
								<view class="nameclore" :class="{ 'tui-tab-item-title-active': tabIndex == item.id }">
									{{ item.title }}
								</view>
								<view class="weix" v-if="tabIndex == item.id">
									<image src="../../static/images/index/indexbottom.png"></image>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="shax" @click="openShaixuan(1)">筛选</view>
			</view>
		</view>

		<!--筛选 -->
		<u-popup v-model="SXshow" mode="bottom" border-radius="24">
			<view style="background: #FFFFFF;" class="padding-bottom">
				<view class="padding" @click.stop="SXshow = true">
					<view @click.stop="timeSx = true">
						<view>预约时间</view>
						<view class="impute padding-lr flex align-center">
							{{time?time:'请选择时间'}}
						</view>
					</view>
					<view>
						<view>订单号</view>
						<view>
							<input type="number" v-model="orderNo" class="impute padding-lr" placeholder="请输入订单号" />
						</view>
					</view>
					<view>
						<view>手机号</view>
						<view>
							<input type="number" v-model="phone" class="impute padding-lr" placeholder="请输入手机号码" />
						</view>
					</view>
				</view>
				<view class="btns" @click.stop="bindx()">查询</view>
			</view>
		</u-popup>
		<!-- 	<view class="box" v-if="SXshow" @click="openShaixuan(1)">
			<view class="popbox" @click.stop="SXshow = false">
				<view class="padding" @click.stop="SXshow = true">
					<view @click.stop="timeSx = true">
						<view>预约时间</view>
						<view class="impute padding-lr flex align-center">
							{{time?time:'请选择时间'}}
						</view>
					</view>
					<view>
						<view>订单号</view>
						<view>
							<input type="number" v-model="orderNo" class="impute padding-lr" placeholder="请输入订单号" />
						</view>
					</view>
					<view>
						<view>手机号</view>
						<view>
							<input type="number" v-model="phone" class="impute padding-lr" placeholder="请输入手机号码" />
						</view>
					</view>
				</view>
				<view class="btns" @click.stop="bindx()">查询</view>
			</view>
		</view> -->
		<u-picker v-model="timeSx" mode="time" :params="params1" @confirm="confirm1"></u-picker>

		<!-- 数据列表 -->
		<view v-for="(item,index) in goods" :key='index' @click="bindtakeDetail(item.helpOrderId)">
			<view class="bg margin-lr radius margin-top-sm">
				<view class="flex justify-between padding-lr padding-top-sm">
					<view>{{item.createTime}}</view>
					<view style="color: #557EFD;" v-if="item.status == 1">待服务</view>
					<view style="color: #557EFD;" v-if="item.status == 2">进行中</view>
					<view style="color: #557EFD;" v-if="item.status == 3">已完成</view>
					<view style="color: #557EFD;" v-if="item.status == 4">已取消</view>
				</view>
				<view style="border-top: 1rpx solid #F2F2F2;margin-top: 20upx;"></view>
				<view class="flex padding-lr padding-tb-sm">
					<image :src="item.image" mode="aspectFill" style="width: 149upx;height: 149upx;"></image>
					<view class="margin-left-xs" style="width: 480rpx;">
						<view class="flex justify-between text-lg text-bold  " style="width:480upx;">
							<view>{{item.classifyName}}</view>
							<view style="color: #557EFD;" v-if="item.task_type==1">悬赏任务
								<text class="text-sm">￥</text>
								<text v-if="item.paySumMoney">{{item.sumRateMoney}}</text>
								<text v-else>{{item.rateMoney}}</text>
							</view>
							<view style="color: #557EFD;" v-if="item.task_type==2">报价任务
								<text class="text-sm">￥</text>
								<text v-if="item.paySumMoney">{{item.sumRateMoney}}</text>
								<text v-else>{{item.rateMoney}}</text>
							</view>
							<view style="color: #557EFD;" v-if="item.task_type==3">一口价任务
								<text class="text-sm">￥</text>
								<text v-if="item.paySumMoney">{{item.sumRateMoney}}</text>
								<text v-else>{{item.rateMoney}}</text>
							</view>

							<view style="color: #557EFD;" v-if="item.task_type==4">师傅任务
								<text class="text-sm">￥</text>
								<text v-if="item.paySumMoney">{{item.sumRateMoney}}</text>
								<text v-else>{{item.rateMoney}}</text>
							</view>
						</view>
						<view class="flex text-sm margin-tb-xs" style="color: #999999;">服务地址：{{item.detailsAddress}}
						</view>
						<view class="flex text-sm " style="color: #999999;">预约时间：<view>
								{{item.deliveryTime}}
							</view>
						</view>
					</view>
				</view>
				<view class="margin-top-sm margin-lr" v-if="item.remarks">
					备注：<text class="text-red">{{item.remarks}}</text>
				</view>
				<view style="border-top: 1rpx solid #F2F2F2;margin-top: 30upx;" v-if="item.status !=3"></view>
				<view class="flex justify-end padding-lr padding-tb-sm align-center">
					<!-- <view class="flex align-center" style="color: #999999;">
						赏金:<text class="text-bold text-lg" style="color: #000000;">￥{{item.money}}</text>
					</view> -->
					<view class="flex">
						<view class="btn1" @click.stop="cancelOrder(item)" v-if="item.status ==1">取消订单</view>
						<view class="btn2 margin-right" @click.stop="bindupde(item)"
							v-if="item.status ==1||item.status ==2">修改信息</view>
						<!-- <view class="btn1" @click.stop="detelOrder(item)">删除订单</view> -->
						<!-- <view class="btn2" @click.stop="openCode(item)" v-if="item.status ==2">完成服务</view> -->
						<view class="btn2 margin-right" @click.stop="bindtakeDetail(item.helpOrderId)"
							v-if="item.status ==2">完成服务
						</view>
						<view class="btn2" @click.stop="bindtakeDetail(item.helpOrderId)" v-if="item.status ==2">退款
						</view>
						<view class="btn2" @click.stop="bindtakeDetail(item.helpOrderId)" v-if="item.status ==1">开始服务
						</view>
					</view>
				</view>
			</view>
		</view>
		<empty v-if="goods.length == 0"></empty>


		<u-popup v-model="show" mode="center" width="500rpx" height="190px" border-radius="14" :closeable="true">
			<view class="padding-lr" style="margin-top: 30upx;">
				<view class="text-lg text-bold margin-bottom">确认码</view>
				<view class=" padding-lr-sm" style="background: #F5F5F5;">
					<!-- <input type="number" v-memo="codes" placeholder="请输入确认码" @confirm="change()"/> -->
					<u-input v-model="codes" type="number" placeholder="请输入确认码" @confirm="change()" />
				</view>
				<view class="btn3" @click="sure()">确认</view>
			</view>
		</u-popup>

		<!--筛选 -->
		<u-popup v-model="showDete" mode="bottom" border-radius="24">
			<view class="padding-bottom-xl" style="background: #FFF;">
				<view class="flex justify-between align-center  padding-top margin-lr">
					<view style="font-size:38upx;color:#333333" class="text-bold">修改信息</view>
					<view @click="showDete = false">
						<image src="/static/images/msg/close.png" style="width:44upx;height:44upx;"></image>
					</view>
				</view>
				<view class="padding">
					<view @click.stop="showtime = true">
						<view>预约时间</view>
						<view class="impute padding-lr flex align-center">
							{{startTime?startTime:'请选择时间'}}
						</view>
					</view>

					<view>
						<view>师傅备注</view>
						<view style="background: #F2F2F2;" class="padding">
							<textarea v-model="remark" placeholder="修改备注" style="height: 200upx;"></textarea>
						</view>
					</view>
				</view>
				<view class="btns" @click.stop="updete()">确定</view>
			</view>
		</u-popup>
		<!-- <view class="box" v-if="showDete">
			<view class="popbox1 ">
				<view class="flex justify-between align-center  padding-top margin-lr">
					<view style="font-size:38upx;color:#333333" class="text-bold">修改信息</view>
					<view @click="showDete = false">
						<image src="/static/images/msg/close.png" style="width:44upx;height:44upx;"></image>
					</view>
				</view>
				<view class="padding">
					<view @click.stop="showtime = true">
						<view>预约时间</view>
						<view class="impute padding-lr flex align-center">
							{{startTime?startTime:'请选择时间'}}
						</view>
					</view>

					<view>
						<view>师傅备注</view>
						<view style="background: #F2F2F2;" class="padding">
							<textarea v-model="remark" placeholder="修改备注" style="height: 200upx;"></textarea>
						</view>
					</view>
				</view>
				<view class="btns" @click.stop="updete()">确定</view>
			</view>
		</view> -->
		<u-picker v-model="showtime" mode="time" :params="params" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import mescrollBody from "@/components/mescroll-uni/components/mescroll-body/mescroll-body.vue";
	import meTabs from "@/components/mescroll-uni/me-tabs/me-tabs.vue";
	import empty from '../../components/empty.vue'

	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			mescrollBody,
			meTabs,
			empty
		},
		data() {
			return {
				time: '',
				timeSx: false,
				params1: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},

				updeOrderTd: '',
				remark: '',
				showDete: false,
				startTime: '',
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: false,
					second: false
				},
				showtime: false,
				orderNo: '',
				phone: '',
				userName: '',
				SXshow: false,
				show: false,
				codes: '',
				goods: [], // 数据列表
				tabs: [{
						id: 0,
						title: '全部',
						status: ''
					}, {
						id: 1,
						title: '待服务',
						status: '1'
					}, {
						id: 2,
						title: '进行中',
						status: '2'
					}, {
						id: 3,
						title: '已完成',
						status: '3'
					},
					// {
					// 	id: 3,
					// 	title: '已取消',
					// 	status: '3'
					// }
				],
				tabIndex: 0, // tab下标
				game: [],
				page: 1,
				limit: 10,
				userId: 0,
				status: 1,
				nickName: '',
				avatar: '',
				customStyle: {
					color: '#999999',
					border: '2rpx solid #999999',
					// backgroundColor: '#1E1F31',
					border: "8rpx",
					width: '180rpx',
					height: '54rpx',
					margin: "0 0 0 20rpx"
				},
				customStyle1: {
					color: '#557EFD',
					border: '2rpx solid #557EFD',
					// backgroundColor: '#1E1F31',
					border: "8rpx",
					width: '180rpx',
					height: '54rpx',
					margin: "0 0 0 20rpx"
				},
				helpTakeId: '',
				helpOrderId: ''
			}
		},
		onLoad(option) {
			this.$queue.showLoading("加载中...");
			this.userId = uni.getStorageSync('userId')
			this.nickName = uni.getStorageSync('nickName')
			if (option.index) {
				this.tabIndex = option.index
			} else {
				this.tabIndex = 0
			}

		},
		onShow() {
			this.orderlist()
		},
		
		methods: {
			updete() {
				let that = this
				that.showDete = false
				uni.showModal({
					title: '提示',
					content: '确定修改订单信息？',
					success: function(res) {
						if (res.confirm) {
							that.showDete = false
							let data = {
								helpOrderId: that.updeOrderTd,
								deliveryTime: that.startTime,
								remarks: that.remark,
								userId: that.userId
							}
							that.$Request.post('/app/help/updateTimeAndRemarks', data).then(res => {
								if (res.code == 0) {
									this.page = 1
									that.orderlist()
									this.startTime = ''
									this.remark = ''
								} else {
									that.$queue.showToast(res.msg);
								}
							})
						}
					},
				})

			},
			bindupde(e) {
				this.updeOrderTd = e.helpOrderId
				this.startTime = e.deliveryTime
				if (e.remarks) {
					this.remark = e.remarks
				} else {
					this.remark = ''
				}
				this.showDete = true
			},
			// 接单详情
			bindtakeDetail(id) {
				uni.navigateTo({
					url: '/my/takeOrder/takeDetail?id=' + id
				})
			},
			openShaixuan(index) {
				if (index == 1) {
					this.SXshow = !this.SXshow
				} else {
					this.showDete = false
				}

			},
			confirm(e) {
				this.startTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':00'
				// console.log(e,this.startTime )
			},
			confirm1(e) {
				this.time = e.year + '-' + e.month + '-' + e.day
				// console.log(e,this.startTime )
			},
			bindx() {
				this.SXshow = false
				this.page = 1
				this.orderlist()
				this.phone = ''
				this.userName = ''
				this.orderNo = ''
				this.time = ''
			},
			orderlist() {
				console.log(this.tabs[this.tabIndex])
				let curTab = this.tabs[this.tabIndex].status
				console.log(curTab)
				let data = {
					status: curTab,
					page: this.page,
					limit: this.limit,
					deliveryTime: this.time,
					orderNo: this.orderNo,
					phone: this.phone,
					name: this.userName
				}
				this.$Request.get('/app/help/selectRunHelpOrder', data).then(res => {

					if (res.code == 0) {

						for (var i = 0; i < res.data.list.length; i++) {
							if (res.data.list[i].image) {
								let image = res.data.list[i].image.split(',')
								res.data.list[i].image = image[0]
							}

						}
						if (this.page == 1) {
							this.goods = res.data.list; //如果是第一页需手动制空列表
						} else {
							this.goods = [...this.goods, ...res.data.list]; //追加新数据
						}

					}
					uni.hideLoading();
					uni.stopPullDownRefresh()
				})
			},
			// 切换菜单
			tabChange(tab) {
				this.tabIndex = tab.id
				this.goods = []; // 置空列表,显示加载进度条
				this.page = 1
				this.orderlist()
			},
			// 输入验证码
			openCode(e) {
				this.show = true
				this.helpTakeId = e.helpTakeId
				this.helpOrderId = e.helpOrderId
			},
			change(e) {
				this.codes = e
			},
			sure() {
				console.log(this.codes, '000000')
				let data = {
					helpTakeId: this.helpTakeId,
					helpOrderId: this.helpOrderId,
					code: this.codes
				}
				this.$Request.post('/app/help/closeOrder', data).then(res => {
					if (res.code == 0) {
						this.show = false
						this.codes = ''
						this.orderlist()
					} else {
						this.show = false
						this.codes = ''
						uni.showToast({
							title: '确认码不正确！',
							icon: 'none',
							duration: 1000
						})
					}
				})
			},
			// 取消订单
			cancelOrder(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定取消订单吗？',
					success: function(res) {
						if (res.confirm) {
							let data = {
								userId: uni.getStorageSync('userId'),
								id: e.helpTakeId
							}
							that.$Request.post('/app/help/endHelpTake', data).then(res => {
								if (res.code == 0) {
									that.orderlist()
								}
							})
						}
					},
				})
			},
			clickItem: function(options) {
				let data = {
					userId: this.userId,
					focusedUserId: options.ordersUserId,
					userType: 3
				}
				this.$Request.postJson('/app/chat/insertChatConversation ', data).then(res => {
					if (res.code == 0) {
						let id = this.userId == res.data.userId ? res.data.focusedUserId : this.userId
						uni.navigateTo({
							url: '/pages/msg/im?chatConversationId=' + res.data.chatConversationId +
								'&byUserId=' + id
						})
					}
				})
			}
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.orderlist()
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.orderlist()
		},
	}
</script>

<style lang="scss">
	/*
	sticky生效条件：
	1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
	2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
	3、父元素的高度不能低于sticky元素的高度
	4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
	*/
	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: var(--window-top);
		// background-color: #fff;
	}

	// 使用mescroll-uni,则top为0
	.mescroll-uni,
	/deep/.mescroll-uni {
		.sticky-tabs {
			top: 0;
		}
	}

	.demo-tip {
		padding: 18upx;
		font-size: 24upx;
		text-align: center;
	}

	page {
		background-color: #F7F7F7;
	}

	.bg {
		background-color: #FFFFFF;
	}

	.tabber {
		width: 100%;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		justify-content: flex-end;
		height: 127rpx;
	}

	.weix image {
		width: 54upx;
		height: 15upx;
	}

	.nameclore {
		text-align: center;
		font-size: 28upx;
		padding: 0rpx 20rpx;
	}

	.nameclore.tui-tab-item-title-active {
		color: #5E81F9;
		font-size: 30upx;
	}

	.btn3 {
		background: #557EFD;
		border-radius: 16upx;
		text-align: center;
		color: #FFFFFF;
		padding: 20rpx 10rpx;
		margin-top: 60rpx;
	}

	.btn1 {
		background: #F5F5F5;
		color: #999999;
		padding: 10upx 25upx;
		border-radius: 40upx;
		margin-right: 20upx;
		// border: 1upx solid #666666;
	}

	.btn2 {
		background: #5E81F9;
		color: #FFFFFF;
		padding: 10upx 25upx;
		border-radius: 40upx;
	}

	.shax {
		width: 10%;
		// height: 80upx;
		// line-height: 60upx;

	}

	.box {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.2);

		/* opacity: 0.2; */
		position: absolute;
		top: 40px;
		z-index: 9
	}

	.popbox {
		width: 749upx;
		/* height: 764upx; */
		background: #FFFFFF;
		padding-bottom: 72rpx;
		z-inde: 9;

		/* #ifdef H5 */
		position: fixed;
		top: 84px;
		left: 0;
		right: 0;
		/* #endif */
		/* #ifndef H5 */
		position: fixed;
		top: 85rpx;
		left: 0;
		right: 0;
		/* #endif */
	}

	.impute {
		background: #F2F2F2;
		height: 80rpx;
		margin: 20rpx 0;
	}

	.btns {
		width: 690upx;
		height: 88upx;
		color: #FFFFFF;
		background: #5E81F9;
		box-shadow: 0upx 10upx 20upx 0upx #8db3f9;
		border-radius: 16upx;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
		font-weight: bold;
		margin: 0 auto;
	}

	.popbox1 {
		width: 749upx;
		/* height: 764upx; */
		background: #FFFFFF;
		padding-bottom: 72rpx;
		z-inde: 9;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		bottom: 0upx;
		/* #endif */
		/* #ifndef H5 */
		bottom: 0rpx;
		/* #endif */
		border-radius: 24upx 24upx 0upx 0upx;
	}
</style>